import Module from "./module";
import { defineComponent } from "vue";
import bgImg from "./assets/21173.svg";
import bgItem1 from "./assets/4374.svg";
import bgItem2 from "./assets/4372.svg";
import bgItem3 from "./assets/4373.svg";
import bgItem4 from "./assets/4375.svg";
import icon1 from "./assets/21172.svg";
import icon2 from "./assets/4499.svg";
import * as echarts from "echarts/core";
import { GridComponent, GridComponentOption } from "echarts/components";
import { LineChart, LineSeriesOption } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import Chart from "./components/chart";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>;

const option: EChartsOption = {
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: ["01", "04", "07", "10", "13", "16", "19", "22", "25", "28", "31"],
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			margin: 30
		}
	},
	yAxis: {
		type: "value",
		splitLine: {
			lineStyle: {
				color: "#314165",
				opacity: 0.5,
				type: "dashed",
				width: 1
			}
		}
	},
	grid: {
		left: "10%",
		right: "5%",
		top: "10%",
		bottom: "20%"
	},
	series: [
		{
			data: [820, 932, 901, 934, 1290, 932, 901, 934, 1290, 1330, 1320],
			type: "line",
			smooth: true,
			itemStyle: {
				opacity: 0
			},
			lineStyle: {
				color: "#00BCF8"
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: "#00BCF8"
					},
					{
						offset: 1,
						color: "#00BCF800"
					}
				])
			}
		}
	]
};

export default defineComponent({
	name: "ElectricStatistics",
	setup() {
		return () => (
			<Module img={bgImg}>
				<div className={"flex flex-col justify-center items-center w-full h-full"}>
					<div className={"grid grid-cols-2 grid-rows-2 w-full mb-6"}>
						<Item img={bgItem1} title={"电站总数"} value={"23"} unit={"座"}></Item>
						<Item img={bgItem2} title={"装机容量"} value={"358"} unit={"mw"}></Item>
						<Item img={bgItem3} title={"今日发电"} value={"2.90"} unit={"万Kwh"}></Item>
						<Item img={bgItem4} title={"综合效率"} value={"58.9"} unit={"%"}></Item>
					</div>
					<div className={"w-full h-full flex flex-col justify-center items-center"}>
						<div className={"w-full h-[30px] flex flex-row items-center"}>
							<img src={icon1} className={"h-[20px] w-[20px] mr-2"} alt={""}></img>
							<div className={"h-full mr-2 whitespace-nowrap"}>本月上网电量趋势</div>
							<img src={icon2} className={"h-[2px] w-fit mr-auto"} alt={""}></img>
							<div className={"h-full w-fit whitespace-nowrap"}>单位：万Kwh</div>
						</div>
						<Chart className={"w-full h-full "} option={option}></Chart>
					</div>
				</div>
			</Module>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	props: { img: String, title: String, value: String, unit: String },
	setup(props) {
		return () => (
			<div className={"w-full h-fit flex flex-row justify-start items-start p-2"}>
				<img className={"w-[46px] h-[46px]"} src={props.img} alt={""} />
				<div className={"h-full flex flex-col justify-between items-start ml-2"}>
					<div>{props.title}</div>
					<div className={" flex flex-row justify-start item.scss-center  text-[14px]"}>
						<div className={"text-[#36CFFF] text-[20px]"}>{props.value}</div>
						<div className={"text-[#BAD9FF]"}>{props.unit}</div>
					</div>
				</div>
			</div>
		);
	}
});
